/**
 * 基本筛选
 */
import React, { Component } from 'react';
import { Button, Input, Select } from 'antd';

const Option = Select.Option;

export const styles = {
	select: {
		width: '10em'
	},

	input: {
		width: '10em',
		margin: '0 1em'
	},
	dr: {
		display: 'inline-block',
		paddingLeft: '1em',
		paddingRight: '1em',
		borderLeft: '1px solid #ccc'
	},
	but: {
		marginRight: '1em'
	},
	s: {
		float: 'right'
	},
	searchBox: {
		padding: '10px',
	},
	bv: {
		margin: '0.5em 0',
		textAlign: 'right'
	}
};

export const randomKey = Math.random();

class Filter extends Component {

	state = {}

	getQueryData() {
		return this.pretreatment({ ...this.state });
	}

	defaultState = { ...this.state }
	randomKey = Math.random()

	pretreatment(data) {
		return data;
	}

	search = (reload) => {
		const data = this.getQueryData();
		if (reload === 1) {
			this.randomKey = Math.random();
		}
		data[randomKey] = this.randomKey;
		if (this.props.onChange) this.props.onChange(data);
	}

	reset = () => {
		console.log('this.defaultState', this.defaultState);
		this.setState({
			...this.defaultState
		}, this.search);
	}

	render() {
		return (
			<div style={styles.searchBox}>
				<Select style={styles.select} >
					<Option>示例</Option>
				</Select>
				<Input placeholder="输入关键字" style={styles.input} />

				<div style={styles.dr}>
					<Select style={styles.select} >
						<Option>示例</Option>
					</Select>
				</div>

				<div style={styles.dr} >
					<Select style={styles.select} >
						<Option>示例</Option>
					</Select>
				</div>

				<div style={styles.s}>
					<Button
						type="primary"
						style={styles.but}

						onClick={this.search}
						icon="search"
						className="search"
					>搜索</Button>
					<Button onClick={this.reset} icon="sync">重置</Button>
				</div>
			</div>
		);
	}
}

export default Filter;
